<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>市政报装情况</title>
  <link rel="stylesheet" href="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.css"
        th:href="@{/agcloud/framework/js-lib/element-2/element.css}">
  <link rel="stylesheet" href="../../static/civicism/css/reset_wt.css" th:href="@{/civicism/css/reset_wt.css}">
  <link rel="stylesheet" href="../../static/civicism/css/base_wt.css" th:href="@{/civicism/css/base_wt.css}">
  <link rel="stylesheet" href="../../static/searchTable/css/search-table.css" th:href="@{/searchTable/css/search-table.css}">
  <link rel="stylesheet"
        href="/framework-ui/src/main/resources/static/agcloud/framework/icon-lib/agcloud-fonts/iconfont.css"
        th:href="@{/agcloud/framework/icon-lib/agcloud-fonts/iconfont.css}">
  <link rel="stylesheet" href="../../static/civicism/css/packagingSituation.css" th:href="@{/civicism/css/packagingSituation.css}">
  <script>
    var ctx = "[[@{/}]]";
  </script>
</head>
<body>
<div
        class="wt-tab effectStatistics"
        id="effectStatistics"
        v-cloak
        v-loading="loading">

  <div class="flex-box bg-white effectStatistics-top">
    <p class="flex-1 font-24 city-name">
      <span>{{dicRegionFirst.regionName}}</span>
      <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <span>{{searchForm.curRegion}}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
        <el-dropdown-menu class="region-drop" slot="dropdown">
          <el-dropdown-item :class="searchForm.regions.indexOf(item.regionId)!==-1&&'active'" :command="item" v-for="(item, index) in dicRegions" :key="index">{{item.regionName}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </p>
    <div class="flex-box mr15">
      <div class="top-time" v-show="startTime&&endTime">
        <p>统计时间为{{startTime}}至{{endTime}}</p>
      </div>
      <el-button-group class="date-type">
        <el-button :class="dateActive === 'all'&&'date-active'" @click="changeDate('all')">总览</el-button>
        <el-button :class="dateActive === 'month'&&'date-active'" @click="changeDate('month')">本月</el-button>
        <el-button :class="dateActive === 'quarter'&&'date-active'" @click="changeDate('quarter')">本季度</el-button>
        <el-button :class="dateActive === 'year'&&'date-active'" @click="changeDate('year')">本年</el-button>
      </el-button-group>
      <div class="date-picker flex-box">
        <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :clearable="false"
                @change="changeDate('dateRange')">
        </el-date-picker>
        <span class="range-separator">至</span>
        <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="changeDate('dateRange', 'endTime')">
        </el-date-picker>
      </div>
    </div>
  </div>

  <div class="wt-content">

    <div class="statis-con" v-loading="totalLoading">
      <ul class="flex-box statis-box">
        <li class="statis-item"
            :class="[{'svg-bg1':item.categoryType === '01'},{'svg-bg2':item.categoryType === '02'},{'svg-bg3':item.categoryType === '03'},{'svg-bg4':item.categoryType === '04'}]"
            v-for="(item,index) in banjianList">
          <p class="item-title" v-if="item.categoryType === '01'">供水报装数</p>
          <p class="item-title" v-else-if="item.categoryType === '02'">供电报装数</p>
          <p class="item-title" v-else-if="item.categoryType === '03'">燃气报装数</p>
          <p class="item-title" v-else>通信报装数</p>
          <div class="flex-box justify-content-between pl15 pr15">
            <p class="item-num">
              {{item.total}}<span class="time-type">件</span>
            </p>
            <img class="iconsin" v-if="item.categoryType === '01'"
                 :src="ctx+ 'civicism/images/packagingSituation/shui .svg'"
            >
            <img class="iconsin" v-else-if="item.categoryType === '02'"
                 :src="ctx+ 'civicism/images/packagingSituation/dian.svg'"
            >
            <img class="iconsin" v-else-if="item.categoryType === '03'"
                 :src="ctx+ 'civicism/images/packagingSituation/huo.svg'"
            >
            <img class="iconsin" v-else
                 :src="ctx+ 'civicism/images/packagingSituation/tongxin.svg'"
            >
          </div>
          <div class="item-bottom">
            <div class="item-line"></div>
            <div class="clearfix">
              <p class="item-des fl">
                <span>联合报装占比&nbsp;&nbsp; {{Number(item.unionPercent).toFixed(2)}}%</span>
              </p>
              <p :class="['item-des', 'icon-des', 'fr', eabzTotalVo.monthTrend==='-1'&&'down-css']">
                  <span>有外线工程占比 &nbsp; &nbsp; {{Number(item.outLinePercent).toFixed(2)}}%
                  </span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!--申报渠道趋势--->
    <div class="mt24 apply-trend-box" v-loading="banjianLoading">
      <div id="apply-trend-echart" style="height: 330px;">

      </div>
    </div>

    <!--报装办件情况--->
    <div class="mt24 packaging-banjian-status">
      <p class="title-p">报装办件情况</p>
      <div class="content">
          <ul class="flex-box">
            <li v-for="(item,index) in unitApprove" :key="index">
              <div class="item flex-box" v-for="(itemSub,subIndex) in item.value">
                <div class="name ellipsis" :title="itemSub.orgName">{{itemSub.orgName}}</div>
                <div>
                  <p class="index">{{subIndex+1}}</p>
                </div>
                <div class="progress round-conner">
                  <div class="curRate round-conner" :style="{backgroundColor:item.color,width:(itemSub.total/item.allTotal)*100+'%'}">
                    <p class="round-conner-num">{{itemSub.total}}</p>
                  </div>
                </div>
              </div>
              <div class="category-name">{{item.name}}</div>
            </li>
          </ul>
      </div>
    </div>

    <!--外线工程申报--->
    <div class="mt24 outline-apply-box ">
      <div id="outline-apply-bar-echart" style="width:72%;height: 330px;display:inline-block;">

      </div>
      <div id="outline-apply-pie-echart" style="width:25%;height: 330px;display:inline-block;">

      </div>
    </div>

    <!--市政报装详情--->
    <div class="mt24 packaging-detail-box">
      <p class="title-p">市政报装详情</p>
      <div class="content">
        <div class="search-box flex-box justify-content-between">
          <div class="flex-box">
            <div class="item flex-box" style="margin-left: 0px;">
              <div class="mr10" style="width:73px;">关键字查询</div>
              <el-input placeholder="请输入申报流水号、项目/工程代码、项目/工程名称等关键字" style="width:430px;" clearable v-model="search.keyword" @change="resetPagination();getlistCivicismApply"></el-input>
            </div>
            <div class="item flex-box">
              <div  class="mr10" style="width: 60px;">报装类型</div>
              <el-select  clearable multiple  placeholder="请选择"  style="width: 280px" v-model="search.categoryTypes" @change="resetPagination">
                <el-option
                        v-for="item in categoryType"
                        :key="item.name"
                        :label="item.label"
                        :value="item.name">
                </el-option>
              </el-select>
            </div>
            <div class="item flex-box">
              <div  class="mr10" style="width: 60px;">办理状态</div>
              <el-select v-model="search.applyStates"  clearable multiple placeholder="请选择" style="width: 280px"  @change="resetPagination">
                <el-option
                        v-for="item in applyStates"
                        :key="item.itemCode"
                        :label="item.itemName"
                        :value="item.itemCode">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search-btn-box">
            <el-button type="primary" @click="resetPagination">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
        </div>
        <div class="table">
          <el-table :data="listCivicismApplyData" style="width:100%" border>
            <el-table-column type="index" label="序号" width="50"  align="center">
            </el-table-column>
            <el-table-column prop="applyinstCode" label="申报流水号" width="140">
            </el-table-column>
            <el-table-column prop="" label="项目/工程名称 | 项目/工程代码" width="260">
              <template slot-scope="scope">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" style="width: 390px;line-height: 22px;">
                    <p class="tooptip-content"><span>项目/工程名称：</span>{{scope.row.projName}}</p>
                    <p class="tooptip-content"><span>工程代码：</span>{{scope.row.localCode}}</p>
                  </div>
                  <div>
                    <div class="ellipsis pro-name">{{scope.row.projName}}</div>
                    <div>{{scope.row.localCode}}</div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="报装类型" prop="categoryTypeName" min-width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.categoryTypeName">{{scope.row.categoryTypeName}}</span>
               <!-- <span v-if="scope.row.itemCategoryType === '01'">用水报装</span>
                <span v-else-if="scope.row.itemCategoryType === '02'">用电报装</span>
                <span v-else-if="scope.row.itemCategoryType === '03'">用气报装</span>
                <span v-else-if="scope.row.itemCategoryType === '04'">通信报装</span>-->
                <span v-else>暂无</span>
              </template>
            </el-table-column>
            <el-table-column prop="regionName" label="行政区划" width="100">
            </el-table-column>
            <el-table-column prop="applicant" min-width="170" label="建设单位">
              <template slot-scope="scope">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" style="width: 320px;line-height: 22px;">
                    <p class="tooptip-content">{{scope.row.applicant}}</p>
                  </div>
                  <div>
                    <div class="ellipsis pro-name">{{scope.row.applicant}}</div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="applyinstState" min-width="120" label="办理状态">
              <template slot-scope="scope">
                <div>
                  <span class="circularBead" :style="{backgroundColor:applyinstStateColor(scope.row.applyinstState)}"></span>{{formatMyStatus(scope.row.applyinstState)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="unitName" min-width="120" label="剩余时限">
              <template slot-scope="scope">
                <div v-if="scope.row.instState">
                    <span :class="{'red-span':scope.row.instState === '3'}" class="timelimit-span">
                        {{scope.row.instState === '3' ? ('逾期' + scope.row.overdueTime + '个工作日') : ('剩余'+ scope.row.remainingTime+'个工作日')}}
                    </span>
                </div>
                <div v-else>
                  -
                </div>
              </template>
            </el-table-column>
            <el-table-column label="申报时间" prop="applyTime" width="160">

            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
              <template slot-scope="scope">
                <span class="option-btn">
                    <a href="javascript:;" @click="toDetail(scope.row)">查看</a>
                </span>
                <span class="option-btn">
                   <i  class="el-icon-loading" v-if="scope.row.loading"></i>
                   <a href="javascript:;" v-else  @click="sendRemind(scope.row)">催办</a>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-show="total>5"  style="marginTop: 15px;" background align="right" :page-size="search.pagination.perpage"
                         :current-page="search.pagination.page" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" :page-sizes="[5, 10, 15 , 20]"
                         layout="total,sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>

</div>



<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/jquery-v1/jquery.min.js" th:src="@{/agcloud/framework/js-lib/jquery-v1/jquery.min.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/vue-v2/vue.js" th:src="@{/agcloud/framework/js-lib/vue-v2/vue.js}"></script>
<!-- 引入组件库 -->
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/element-2/element.js" th:src="@{/agcloud/framework/js-lib/element-2/element.js}"></script>
<script src="/framework-ui/src/main/resources/static/agcloud/framework/js-lib/agcloud-lib/js/common.js" th:src="@{/agcloud/framework/js-lib/agcloud-lib/js/common.js}"></script>
<script src="../../../../../static/agcloud/opus/admin/common/js/axios.min.js" type="text/javascript" th:src="@{/agcloud/opus/admin/common/js/axios.min.js}"></script>


<script th:src="@{/agcloud/framework/js-lib/echarts-v4/echarts.min.js}"></script>
<script src="../../static/civicism/js/packagingSituation.js" th:src="@{/civicism/js/packagingSituation.js}" type="text/javascript"></script>

</body>
</html>